<template>
  <div class="order">
    <a-card title="品号检验列表">
      <!-- <FormHeader :collection="collection"></FormHeader> -->
      <a-select v-model="opminac" @change="init">
        <a-option>现场</a-option>
        <a-option>测量室</a-option>
      </a-select>
      <a-descriptions :data="mesBase" bordered />
      <a-space>
        <div>抽检数量:</div>
        <a-input-number v-model="inspectionQuantity" style="width: 220px" @change="viewInspect" />
      </a-space>
      <a-tabs default-active-key="文本型" @change="textChange">
        <a-tab-pane key="文本型" title="文本型"> </a-tab-pane>
        <a-tab-pane key="数值型" title="数值型"> </a-tab-pane>
      </a-tabs>
      <a-table
        :columns="modelPm == '文本型' ? columnsA : columnsB"
        :data="modelPm == '文本型' ? textYypeList : numericalTypeList"
        :pagination="false"
      >
      </a-table>
      <a-select v-model="reaca">
        <template #prefix>判定结果为 </template>
        <a-option>OK</a-option>
        <a-option>NG</a-option>
      </a-select>
      <div class="order-addInspection">
        <a-space>
          <a-button type="primary" size="large" @click="addInspection">确认生成检验单</a-button>
          <a-button type="primary" size="large" status="success" @click="reserve">保存</a-button>
        </a-space>
      </div>
    </a-card>
    <!-- <vueQr /> -->

    <div v-if="checkedValue" class="boxPnm">
      <!-- <div id="viewPDF" ref="viewPDF"></div> -->
      <div :style="{ marginTop: '20px', marginBottom: '40px' }">
        <a-radio-group v-model="checkedValue">
          <template v-for="item in jytz" :key="item">
            <a-radio :value="item.name" @click="checkedValueChange(item)">
              <template #radio="{ checked }">
                <a-space align="start" class="custom-radio-card" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot" />
                  </div>
                  <div>
                    <div className="custom-radio-card-title">{{ item.name }}</div>
                    <a-typography-text type="secondary"> {{ item.type }} </a-typography-text>
                  </div>
                </a-space>
              </template>
            </a-radio>
          </template>
        </a-radio-group>
      </div>
      <!-- <embed :src="checkedUrlValue" type="application/pdf" height="620" width="100%" /> -->
      <!-- <vue-office-pdf
        style="width: 100%; height: 600px"
        src="https://test-1316981135.cos.ap-nanjing.myqcloud.com/202311/e53fc346-4c0e-45f9-aa2d-a040c4c116a9.pdf"
        @rendered="renderedHandler"
        @error="errorHandler"
      /> -->
      <!-- <object
        width="100%"
        height="600px"
        data="https://test-1316981135.cos.ap-nanjing.myqcloud.com/202311/e53fc346-4c0e-45f9-aa2d-a040c4c116a9.pdf"
        type="application/pdf"
      ></object> -->
    </div>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './inspectionPolicy';
import FormHeader from '@com/formHeader/formHeader.vue';

export default defineComponent({
  name: 'OrderDom',
  components: { FormHeader },
  setup() {
    const {
      base,
      handlePageChange,
      handlePageSizeChange,
      viewInspect,
      viewDetails,
      init,
      textChange,
      addInspection,
      cameraActivate,
      renderedHandler,
      errorHandler,
      checkedValueChange,
      // pdfLoad,
      reserve,
    } = importConfig();
    init();
    // onMounted(() => {
    //   pdfLoad();
    // });
    return {
      ...toRefs(base),
      handlePageChange,
      handlePageSizeChange,
      viewInspect,
      viewDetails,
      init,
      textChange,
      addInspection,
      cameraActivate,
      renderedHandler,
      errorHandler,
      checkedValueChange,
      reserve,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}
.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 250px;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ededed;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }
  &-addInspection {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .boxPnm {
    margin-bottom: 120px;
  }
}
.formHeader {
  &-criteria {
    flex: 1 1 0;
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
</style>
